<!DOCTYPE html>
<html>
<head>
	<title>更新头像</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../static/css/main.css">
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/uuid.js"></script>
	<script src="../static/js/main.js"></script>
</head>
<body>
	<div class="app frame avatar" id="app">
    <div class="box">
      <p class="title">上传头像</p>
      <img class="close" @click="back" src="../static/images/close_btn1.png" alt="">
      <div class="content">
        <p class="header">！注意事项</p>
        <p class="text">禁止使用有诱导性的内容，二维码，联系方式等违规违法违约的图片，一经发现，永久封号，
          并保留追究法律责任的权利。</p>
      </div>
      <img @click="update_avatar_confirm" class="btn" src="../static/images/yes.png" alt="">
    </div>
	</div>
	<script>
	apiready = function(){
    var game = new Game("../static/mp3/bg1.mp3");
    // 在 #app 标签下渲染一个按钮组件
    Vue.prototype.game = game;
		new Vue({
			el:"#app",
			data(){
				return {
					prev:{name:"",url:"",params:{}},
					current:{name:"avatar",url:"avatar.html",params:{}},
				}
			},
			methods:{
        update_avatar_confirm(){
          // 确认上传头像的来源

          let sourceType = ["album","camera"]; // 来源类型

          api.actionSheet({
              title: '请选择上传头像的来源',
              cancelTitle: '取消',
              buttons: ['相册','相机'],
          }, (ret, err)=>{
              if(ret.buttonIndex > sourceType.length){
                this.back(); // 关闭当前页面
              }

              api.getPicture({
                       sourceType: sourceType[ret.buttonIndex-1],
                       mediaValue: 'pic', // 媒体类型,pic,video
                       destinationType: 'base64', // 数据源格式
                       allowEdit: true,
                       direction: "", // 当来源类型是相机，则可以选择启动前置还有后置摄像头 front、rear
                       preview:true,
                       quality: 100,
                       targetWidth: 100,
                       targetHeight: 100,
                       saveToPhotoAlbum: true,
                   }, (ret, err)=>{
										 		if(ret.base64Data){
                        	this.upload_avatar(ret);
												}
									 });
          });
        },
        upload_avatar(ret){
          // 头像上传处理
					var self = this;
					let access_token = this.game.getdata("access_token");
					let agree = false;
					if(!access_token){
						access_token = this.game.getfs("access_token");
						agree = true;
					}
					this.game.post(this,{
						"method": "Users.avatar",
						"params": {
							"image": ret.base64Data,
						},
						"header":{"Authorization": "jwt " + access_token},
						success(response){
							var data = response.data;
							if(data.result && data.result.errno == 1000){
								// 上传成功
								if(agree){
									// 记住状态
									self.game.setfs({"access_token":data.result.access_token,"refresh_token":data.result.refresh_token});
								}else{
									// 不记住状态
									self.game.setdata({"access_token":data.result.access_token,"refresh_token":data.result.refresh_token});
								}

								// 通知其他窗口或页面，进行用户信息更新操作
								// 可以基于APICloud的全局事件通知来完成
								api.sendEvent({
								    name: 'upload_access_token',
								    extra: {}
								});

								// 关闭当前页面
								self.game.closeFrame();
							}
						}
					});
        },
        back(){
          this.game.closeFrame();
        }
			}
		});
	}
	</script>
</body>
</html>
